<template>
  <view class="container">
    <!-- 轮播图，显示多个图片 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in swiperData" :key="index">
        <image :src="item.imageUrl" class="swiper-image" />
      </swiper-item>
    </swiper>

    <!-- 频道切换选项卡 -->
    <view :class="['tabs', { sticky: isSticky }]">
      <!-- 表白墙选项卡 -->
      <view 
        :class="['tab', { active: activeTab === 'confessionWall' }]" 
        @click="switchTab('confessionWall')">
        表白墙
      </view>
      <!-- 社团频道选项卡 -->
      <view 
        :class="['tab', { active: activeTab === 'clubChannel' }]" 
        @click="switchTab('clubChannel')">
        社团频道
      </view>
	  <!-- 失物招领选项卡 -->
	  <view
	    :class="['tab', { active: activeTab === 'lostFind' }]" 
	    @click="switchTab('lostFind')">
	    失物招领
	  </view>
    </view>
	
	<view @click="goto()">
		
    <!-- 渲染表白墙内容 -->
    <view v-if="activeTab === 'confessionWall'">
      <view v-for="(post, index) in posts" :key="index" class="post-item" @click="goto(post.id)">
        <view class="header">
          <image class="avatar" :src="post.avatar" mode="aspectFill" />
          <view class="name">{{ post.name }}</view>
          <view class="time">{{ post.startingTime }}</view>
        </view>

        <!-- 渲染文本内容 -->
        <view v-if="post.text" class="text">{{ post.text }}</view>

        <!-- 渲染图片内容 -->
        <view v-if="post.mediaList.length > 0" class="media-grid">
          <view class="media-item" v-for="(media, mediaIndex) in post.mediaList" :key="mediaIndex">
            <image class="media-image" :src="media.url" mode="aspectFill" />
          </view>
        </view>

        <!-- 底部操作栏，包含点赞、评论和分享 -->
        <view class="footer">
          <!-- 点赞按钮 -->
          <view class="footer-item" @click.stop="toggleLike(post)">
            <image 
              class="icon" 
              :src="post.isLiked ? '/static/点赞.png' : '/static/未点赞.png'" 
              mode="aspectFill" 
            />
            <text :class="['footer-text', { 'liked': post.isLiked }]">
              {{ post.likeCount }}
            </text>
          </view>
          <!-- 评论按钮 -->
          <view class="footer-item" @click.stop="handleComment(post)">
            <image class="icon" src="/static/评论.png" mode="aspectFill" />
            <text class="footer-text">评论</text>
          </view>
          <!-- 分享按钮 -->
          <view class="footer-item" @click.stop="handleShare(post)">
            <image class="icon" src="/static/分享.png" mode="aspectFill" />
            <text class="footer-text">分享</text>
          </view>
        </view>
      </view>
    </view>
	</view>

    <!-- 渲染社团频道内容 -->
    <view v-if="activeTab === 'clubChannel'">
      <view class="header">
        <image class="avatar" :src="clubChannelProfile.avatar" mode="aspectFill" />
        <view class="name">{{ clubChannelProfile.name }}</view>
      </view>

      <!-- 渲染文本内容 -->
      <view v-if="clubChannelProfile.text" class="text">{{ clubChannelProfile.text }}</view>

      <!-- 渲染图片或视频内容 -->
      <view v-if="hasMedia(clubChannelProfile)" class="media-grid">
        <view class="media-item" v-for="(item, index) in clubChannelProfile.mediaList" :key="index">
          <image v-if="item.type === 'image'" class="media-image" :src="item.url" mode="aspectFill" />
          <video v-if="item.type === 'video'" class="media-video" :src="item.url" controls />
        </view>
      </view>
	  
	  
    </view>
	
	<!-- 渲染失物招领内容 -->
	<view v-if="activeTab === 'lostFind'">
	  <view class="header">
	    <image class="avatar" :src="lostFindProfile.avatar" mode="aspectFill" />
	    <view class="name">{{ lostFindProfile.name }}</view>
	  </view>
	
	  <!-- 渲染文本内容 -->
	  <view v-if="lostFindProfile.text" class="text">{{ lostFindProfile.text }}</view>
	
	  <!-- 渲染图片或视频内容 -->
	  <view v-if="hasMedia(lostFindProfile)" class="media-grid">
	    <view class="media-item" v-for="(item, index) in lostFindProfile.mediaList" :key="index">
	      <image v-if="item.type === 'image'" class="media-image" :src="item.url" mode="aspectFill" />
	      <video v-if="item.type === 'video'" class="media-video" :src="item.url" controls />
	    </view>
	  </view>
	</view>

   
  </view>
  
  
</template>

<script>
	import tool from '@/utils/tool.js'
	import postApi from '@/api/postApi.js'
	import goodApi from '@/api/goodApi.js'
export default {
  data() {
    return {
      activeTab: 'confessionWall',
      isSticky: false,
      posts: [], // 存储所有帖子数据
      
      // 轮播图数据保持不变
      swiperData: [
        { imageUrl: 'https://img.ai4s.cc/577de3b1-c923-4790-bf18-930f59f596e2.jpg' },
        { imageUrl: 'https://img.ai4s.cc/577de3b1-c923-4790-bf18-930f59f596e2.jpg' },
        { imageUrl: 'https://img.ai4s.cc/577de3b1-c923-4790-bf18-930f59f596e2.jpg' },
      ],

      // 社团频道数据
      clubChannelProfile: {
        avatar: 'https://example.com/avatar2.jpg', // 头像URL
        name: '社团频道', // 姓名
        text: '这是社团频道的示例文本。', // 文本内容
        mediaList: [ // 图片和视频的列表
          { type: 'image', url: 'https://example.com/image2.jpg' }, // 图片
          { type: 'video', url: 'https://example.com/video2.mp4' }, // 视频
        ],
      },
	  
	  //失物招领数据
	  lostFindProfile: {
	    avatar: 'https://example.com/avatar2.jpg', // 头像URL
	    name: '社团频道', // 姓名
	    text: '这是社团频道的示例文本。', // 文本内容
	    mediaList: [ // 图片和视频的列表
	      { type: 'image', url: 'https://example.com/image2.jpg' }, // 图片
	      { type: 'video', url: 'https://example.com/video2.mp4' }, // 视频
	    ],
	  },

      likeCount: 120,
      commentCount: 45,
      isLiked: false,
	  username:'',
	  id:''
    };
  },
  
  mounted() {
    this.fetchPosts(); // 页面加载时获取帖子数据
  },
  onShow() {
    const app = getApp();
    if (!app.globalData.isLoggedIn) {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.switchTab({
          url: '/pages/mine/mine'
        });
        return;
      }
    }
  },
  methods: {
    // 获取帖子数据
    async fetchPosts() {
      try {
        const response = await postApi.selectAll();
        if (response && response.data) {
          this.posts = response.data.map(post => ({
            id: post.id,
            title: post.tittle,
            text: post.text,
            mediaList: post.imageId ? post.imageId.map(url => ({
              type: 'image',
              url: url
            })) : [],
            startingTime: post.startingTime,
            avatar: post.headPortrait || 'https://example.com/default-avatar.jpg',
            name: post.username || '匿名用户',
            likeCount: post.goodnumber || 0,
            isLiked: post.good === 1,
          }));
        }
      } catch (error) {
        console.error('获取帖子数据失败：', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
	  
    goto(postId) {
      if (!postId) {
        console.log('帖子ID不存在:', postId);  // 更好的调试信息
        return;  // 如果没有ID就直接返回，不显示toast
      }
      uni.navigateTo({
        url: `/pages/test01/test01?id=${postId}`
      });
    },
    // 切换频道
    switchTab(tab) {
      this.activeTab = tab; // 根据传入的tab切换当前选项卡
    },


    // 检查当前频道是否有媒体内容（图片或视频）
    hasMedia(profile) {
      return profile.mediaList && profile.mediaList.length > 0; // 如果有mediaList，则返回true
    },

    // 切换点赞状态
    async toggleLike(post) {
      try {
        if (!post.id) {
          console.error('帖子ID不存在');
          return;
        }

        // 先获取当前帖子在数组中的索引
        const postIndex = this.posts.findIndex(p => p.id === post.id);
        if (postIndex === -1) return;

        // 调用接口前先保存当前状态
        const currentIsLiked = post.isLiked;

        // 调用接口
        const response = await (currentIsLiked ? 
          goodApi.degood(post.id) : 
          goodApi.addgood(post.id));
        
        if (response.code === 200) {
          // 使用 Vue 的响应式更新方法
          this.$set(this.posts[postIndex], 'isLiked', !currentIsLiked);
          this.$set(this.posts[postIndex], 'likeCount', 
            this.posts[postIndex].likeCount + (currentIsLiked ? -1 : 1));
          
          uni.showToast({
            title: currentIsLiked ? '取消点赞' : '点赞成功',
            icon: 'none'
          });
        } else {
          uni.showToast({
            title: response.msg || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('点赞操作失败：', error);
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      }
    },


    // 发布按钮的点击事件，跳转到发布页面
    goToPublishPage() {
      uni.navigateTo({
        url: '/pages/publish/publish', // 跳转到发布页面
      });
    },

    // 页面滚动监听，判断是否需要吸顶
    onPageScroll(e) {
      // 判断页面滚动距离，当超过200px时，激活吸顶效果
      if (e.scrollTop > 200) {
        this.isSticky = true; // 吸顶
      } else {
        this.isSticky = false; // 不吸顶
      }
    },

    // 处理点赞
    handleLike(post) {
      post.isLiked = !post.isLiked;
      post.likeCount = (post.likeCount || 0) + (post.isLiked ? 1 : -1);
      // TODO: 调用点赞 API
    },

    // 处理评论 - 跳转到详情页并开评论
    handleComment(post) {
      uni.navigateTo({
        url: `/pages/test01/test01?id=${post.id}&openComment=true`,
        success: () => {
          // 可以通过事件通信告诉详情页直接打开评论框
          uni.$emit('openComment');
        }
      });
    },

    // 处理分享
    handleShare(post) {
      uni.showActionSheet({
        itemList: ['分享到微信', '复制链接', '分享到朋友圈'],
        success: function (res) {
          uni.showToast({
            title: '分享功能开发中',
            icon: 'none'
          });
        }
      });
    },
  },

  // 监听页面滚动事件
  onPageScroll: function (e) {
    this.onPageScroll(e); // 调用onPageScroll方法来处理吸顶效果
  },
};
</script>

<style scoped>
  /* 轮播图的样式 */
  .swiper {
    width: 100%; /* 宽度占满父容器 */
    height: 200px; /* 高度固定为200px */
    margin-bottom: 20px; /* 底部间距 */
  }
  
  .swiper-image {
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover; /* 图片填充模式，保持比例，剪裁多余分 */
  }
  
  /* 频道切换选项卡样式 */
  .tabs {
    display: flex; /* 使用flex布局来排列选项卡 */
    justify-content: space-around; /* 水平分布选项卡 */
    padding: 10px; /* 上下内边距 */
    margin-bottom: 20px; /* 底部间距 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }
  
  /* 吸顶效果 */
  .tabs.sticky {
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度占满整个页面 */
    background-color: white; /* 背景色为白色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    z-index: 10; /* 确保选项卡在其他元素上方 */
  }
  
  /* 单个选项卡的样式 */
  .tab {
    font-size: 16px; /* 字体大小 */
    color: #333; /* 默认黑色文字 */
    padding: 10px; /* 上下内边距 */
    cursor: pointer; /* 鼠标指针样式 */
    position: relative; /* 用于定位下划线 */
  }
  
  /* 选中的选项卡样式 */
  .tab.active {
    color: #007AFF; /* 选中时字体颜色变为蓝色 */
  }
  
  /* 选中时添加下划线 */
  .tab.active::after {
    content: ''; /* 使用伪元素生成下划线 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* 下划线宽度占满整个选项卡 */
    height: 2px; /* 下划线的高度 */
    background-color: #007AFF; /* 下划线颜色为蓝色 */
  }
  
  /* 内容容器样式 */
  .container {
    background-color: white; /* 背景色为白色 */
    border-radius: 8px; /* 容器圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  
  /* 头像和名称的样式 */
  .header {
    display: flex; /* 使用flex布局排列头像和名称 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 10px; /* 底部间距 */
  }
  
  .avatar {
    width: 40px; /* 头像宽度 */
    height: 40px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    margin-right: 10px; /* 头像与名称之间的间距 */
  }
  
  .name {
    font-size: 16px; /* 姓名字体大小 */
    font-weight: bold; /* 姓名加粗 */
    color: #333; /* 姓名字体颜色 */
  }
  
  /* 文本部分样式 */
  .text {
    font-size: 14px; /* 文本字体大小 */
    color: #666; /* 文本颜色 */
    margin-bottom: 15px; /* 文本底部间距 */
  }
  
  /* 图片和视频的九宫格样式 */
  .media-grid {
    display: grid; /* 使用grid布局 */
    grid-template-columns: repeat(3, 1fr); /* 每行3个元素，均分宽度 */
    grid-gap: 10px; /* 元素之间的间距 */
    margin-top: 10px; /* 上部间距 */
  }
  
  /* 单个媒体项的样式 */
  .media-item {
    position: relative;
    padding-top: 100%; /* 使得容器保持正方形 */
    overflow: hidden; /* 内容溢出隐藏 */
  }
  
  /* 图片的样式 */
  .media-image {
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度填满容器 */
    height: 100%; /* 高度填满容器 */
    object-fit: cover; /* 图片覆盖容器，保持比例 */
    border-radius: 6px; /* 圆角 */
  }
  
  /* 视频的样式 */
  .media-video {
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 宽度填满容器 */
    height: 100%; /* 高度填满容器 */
    border-radius: 6px; /* 圆角 */
    background-color: #000; /* 视频背景色为黑色 */
  }
  
  /* 底部操作栏的样式 */
  .footer {
    display: flex; /* 使用flex布局 */
    justify-content: space-around; /* 水平分布操作项 */
    padding: 15px 0; /* 上下内边距 */
    border-top: 1px solid #ddd; /* 底部边框 */
  }
  
  /* 单个底部操作项的样式 */
  .footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 图标样式 */
  .icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
  
  /* 操作项文本样式 */
  .footer-text {
    font-size: 14px;
    color: #666;  /* 未点赞时的颜色 */
  }
  
  .footer-text.liked {
    color: #ff6b6b;  /* 点赞后的红色 */
  }
  
  .post-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .time {
    font-size: 12px;
    color: #999;
    margin-left: auto;
  }
  
  /* 操作栏样式 */
  .action-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0;
    margin-top: 15px;
    border-top: 1px solid #eee;
  }
  
  .action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #f8f8f8;
    transition: all 0.3s ease;
  }
  
  .action-item:active {
    background-color: #e0e0e0;
    transform: scale(0.95);
  }
  
  .iconfont {
    font-size: 20px;
    color: #666;
  }
  
  .action-count {
    font-size: 14px;
    color: #666;
  }
  
  /* 点赞效果 */
  .liked {
    color: #ff6b6b !important;
  }
  
  /* 帖子卡片样式优化 */
  .post-item {
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  
  .post-item .header {
    margin-bottom: 12px;
  }
  
  .post-item .text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
  }
  
  /* 图标字体 */
  @font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_12345678.woff') format('woff');
  }
  
  .iconfont {
    font-family: 'iconfont';
  }
  
  .icon-like:before {
    content: '\e669';
  }
  
  .icon-comment:before {
    content: '\e668';
  }
  
  .icon-share:before {
    content: '\e667';
  }
  
  .footer-item .icon {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
  }
  
  .footer-text {
    color: #666;
    transition: all 0.3s ease;
  }
  
  .footer-text.liked {
    color: #ff6b6b;
  }
  
  /* 点赞状态的图标样式 */
  .footer-item.liked .icon {
    transform: scale(1.1);
  }
  </style>